Искусство CSS: Элегантное ограничение текста с помощью -webkit-line-clamp - Web-Global: Связывая миры через веб-технологии
Web-Global

Искусство CSS: Элегантное ограничение текста с помощью -webkit-line-clamp

Пост опубликован 2 июля 2025 в 10:57 и находится в рубриках HTML&CSS. 3
Поделиться:

В мире веб-разработки часто возникает необходимость красиво ограничить количество отображаемого текста, особенно в новостных блоках, карточках товаров или списках статей. CSS предлагает элегантное решение этой задачи с помощью свойства -webkit-line-clamp. Давайте разберёмся, как работает этот мощный инструмент.

Магия многоточия

Рассмотрим приведённый CSS-код:

.news_body p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

Этот небольшой набор свойств творит чудеса:

  1. overflow: hidden — скрывает содержимое, выходящее за границы элемента
  2. text-overflow: ellipsis — добавляет многоточие (…) в месте обрезания текста
  3. display: -webkit-box — активирует гибкое блочное контекстное отображение
  4. -webkit-line-clamp: 4 — ограничивает текст четырьмя строками
  5. -webkit-box-orient: vertical — задаёт вертикальную ориентацию блока

Где применять?

Этот приём особенно полезен для:

  • Новостных лент (как в нашем примере с классом .news_body)
  • Карточек товаров в интернет-магазинах
  • Списков статей или блогов
  • Любых мест, где нужно показать «превью» контента

Преимущества

  1. Чисто CSS-решение — не требует JavaScript
  2. Адаптивность — корректно работает при изменении размеров экрана
  3. Эстетика — аккуратные блоки с единообразным отображением
  4. Простота — минимальный код для реализации

Ограничения

Важно помнить, что:

  • Это свойство работает только в WebKit-браузерах (но имеет хорошую поддержку)
  • Для кросс-браузерности может потребоваться фолбэк
  • Не поддерживает точное ограничение по высоте (только по количеству строк)

Альтернативы

Если вам нужно более точное управление:

  • Можно использовать JavaScript для обрезки текста
  • Применить max-height с overflow: hidden
  • Использовать CSS-функцию line-clamp (экспериментальная)

Заключение

-webkit-line-clamp — это прекрасный пример того, как современный CSS позволяет решать типовые задачи веб-разработки элегантно и эффективно. В следующий раз, когда вам понадобится ограничить текст до нескольких строк с красивым многоточием, вспомните об этом мощном инструменте.